<template>
  <div class="menu-wrapper">
<!--    <category-dialog ref="categoryDialog" @confirm="dialogConfirm" />-->
    <el-form ref="companyForm" :model="companyForm" :rules="rules" label-width="120px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;" class="el-headerTitle">新增企业信息</span>
      </div>
      <el-form-item label="企业名称" prop="name">
        <el-col >
          <el-input v-model="companyForm.name" style="width: 400px" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="企业总人数" prop="people" >
        <el-col >
          <el-input v-model="companyForm.people" style="width: 400px" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="所属社区" prop="communityId" style="width: 520px;">
        <queryCommunity @queryCommunityClick='queryCommunityClick' :shopname="query.communityName"></queryCommunity>
      </el-form-item>
      <el-form-item label="所属楼宇" prop="communityId" style="width: 520px;">
        <queryApartment @queryApartmentClick='queryApartmentClick' :shopname="query.buildingName" :communityId="query.communityId"></queryApartment>
      </el-form-item>
      <el-form-item label="详细地址" prop="people" >
        <el-col >
          <el-input v-model="companyForm.address" style="width: 400px" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="排序" prop="orders" >
        <el-col >
          <el-input v-model="companyForm.orders" style="width: 400px" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="saveCompany('companyForm')">&nbsp&nbsp创建&nbsp&nbsp</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
.el-headerTitle{
  font-size: 20px;
  color: #409EFF;
}
</style>
<script>
import {save,del,find,update} from '@/api/product'
import { EventBus } from '@/api/eventBus'
import { checkUserExists } from '@/api/sysUser'
import utils from '../../utils/utils.js'
import md5 from 'js-md5';
import CategoryDialog from '@/components/CategoryDialog'
import queryApartment from "@/components/Query/queryGroup";
export default {
  name:'group-add',
  data() {
    return {
      companyForm: {
        name: '',
        communityId: '',
        orders: '',
        userId: '',
        mobile:'',
        status: 0,
        people:'',
        buildingId:'',
        // buildingName:"",
        address:'',
      },
      query: {
        buildingName:this.$route.query.buildingName,
        buildingId:this.$route.query.buildingId,
        communityId:this.$route.query.communityId,
        communityName:this.$route.query.communityName,
      },

      rules: {
        name: [
          {required: true, message: '请输入企业名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
        ],
        people: [
          {required: true, message: '请输入企业总人数', trigger: 'blur'}
        ],
        communityId: [
          {required: true, message: '所属社区不能为空', trigger: 'blur'}
        ],
        buildingId:[
          {required: true, message: '所属楼宇不能为空', trigger: 'blur'}
        ],
        address:[
          {required: true, message: '详细地址不能为空', trigger: 'blur'}
        ],
      },
      loading: false,
      options: [],
      buildingData:[],
      pageSize:5,
      pageNum:1,
    }
  },
  filters: {},
  components: {CategoryDialog,queryApartment,},
  created() {
  },
  methods: {
    loadBuilding(){
      var _this = this;
      _this.buildingData=[];
      let params = new URLSearchParams()
      params.append("pageSize", this.pageSize);
      params.append("pageNum", this.pageNum);
      buildList(params).then(response => {
        // console.log(response,"loadBuilding" )
        _this.total = response.data.total
        if(
          !utils.isNull(this.companyForm.communityName)
          && !utils.isNull(this.companyForm.communityId)
        ){
          let form={};
          response.data.data.forEach(item=>{
            if(item.communityId==_this.companyForm.communityId ||
              item.communityName==_this.companyForm.communityName){
              form=item;
              _this.buildingData.push(form);
            }
          })
        }
        else{
          _this.buildingData = response.data.data
        }
      }).catch(error => {
      })
    },
    queryCommunityClick(data){
      this.query.communityName=data.name;
      this.query.communityId = data.shopId
      this.companyForm.communityId=this.query.communityId;
    },
    queryApartmentClick(data){
      this.query.buildingName=data.name;
      this.query.buildingId = data.shopId;
      this.companyForm.buildingId=this.query.buildingId;
    },
    saveCompany(companyForm) {
      var _this = this
      console.info("saveCompany",this.companyForm)
      this.$refs[companyForm].validate((valid) => {
        console.log(valid)
        if (valid) { // 校验表单
          _this.loading = true
          var  form = {
            name: _this.companyForm.name,
            communityId: _this.companyForm.communityId,
            mobile: _this.companyForm.mobile,
            orders: _this.companyForm.orders,
            status:0,
            people: _this.companyForm.people,
            address:_this.companyForm.address,
            buildingId:_this.companyForm.buildingId,
          }
          console.log("form",form)
          save(form).then(response => {
            _this.loading = false
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            EventBus.$emit('company-add', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
              _this.$router.push({
                path: '/company/list'
              })
            }
            )// 关闭当前tab回到列表
          }).catch(error => {
            _this.loading = false
            console.log('error!!')
          });
        } else {
          console.log('error submit!!')
          return false
        }
      });
    }
  },
}
</script>
